<template>
    <div class="pack">
        <el-scrollbar :style="{height:'100%'}">
            <div class="word_div">
                <span
                    class="point"
                    @click="play(word.word)"
                >{{word.word}}</span>
            </div>
            <div class="explained_div">
                <span
                    class="point"
                    @click="play(word.explained)"
                >{{word.explained}}</span>
            </div>
            <div class="understand_div">
                <span class="point" @click="play(data.understand)" v-if="data">{{data.understand}}</span>
            </div>

            <div v-if="data" class="tab_div">
                <el-tabs>
                    <el-tab-pane v-for="ex in getExList()" :key="ex.name" :label="ex.name">
                        <span v-for="(item, index) in ex.data" :key="index">
                            <p
                                @click="play(item.explained)"
                                class="explained point"
                            >{{item.explained}}</p>
                            <span v-for="(example, index) in item.examples" :key="index">
                                <p @click="play(example)" class="example point">{{example}}</p>
                            </span>
                        </span>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <div class="button_div">
                <el-button
                    @click="toTable"
                    :style="{width:'100%'}"
                    icon="el-icon-back"
                    size="mini"
                >返回单词列表</el-button>
            </div>

            <AudioVue ref="audio" />
        </el-scrollbar>
    </div>
</template>
<script>
import { card } from "../store/storeTest";
import { fetchPost } from "../js/http";
import AudioVue from "./Audio.vue";

class Explain {
    constructor(name) {
        this.name = name;
        this.data = new Array();
    }
}

export default {
    components: { AudioVue },
    data() {
        return {
            data: null,
        };
    },
    computed: {
        word: function() {
            return card.word;
        }
    },
    methods: {
        load() {
            fetchPost("/word/getWordCard", { wordId: this.word.wordId }).then(
                res => {
                    this.data = res.data;
                    this.word.word = this.data.word;
                    this.word.explained = this.data.explained;
                    let n = new Explain("名词");
                    let v = new Explain("动词");
                    let adj = new Explain("形容词");
                    let adv = new Explain("副词");

                    for (const key in this.data.explainMap) {
                        let explain = this.data.explainMap[key];
                        switch (explain.type) {
                            case 0:
                                this.setExplain(n, explain);
                                break;
                            case 1:
                                this.setExplain(v, explain);
                                break;
                            case 2:
                                this.setExplain(adj, explain);
                                break;
                            case 3:
                                this.setExplain(adv, explain);
                                break;
                        }
                    }
                    if (n.data.length > 0) {
                        this.data["n"] = n;
                    }
                    if (v.data.length > 0) {
                        this.data["v"] = v;
                    }
                    if (adj.data.length > 0) {
                        this.data["adj"] = adj;
                    }
                    if (adv.data.length > 0) {
                        this.data["adv"] = adv;
                    }
                }
            );
        },
        getExList() {
            let result = new Array();
            if (this.data.n) {
                result.push(this.data.n);
            }
            if (this.data.v) {
                result.push(this.data.v);
            }
            if (this.data.adj) {
                result.push(this.data.adj);
            }
            if (this.data.adv) {
                result.push(this.data.adv);
            }
            return result;
        },
        setExplain(explainSrc, explainServer) {
            explainSrc.data.push(explainServer);
        },
        toTable() {
            this.$emit("toTable");
        },
        play(text) {
            let audio = this.$refs.audio;
            audio.start();
            let textArr = text.split(".");
            textArr.forEach(element => {
                audio.read(element, 0.8);
            });
            audio.play();
        }
    }
};
</script>
<style scoped>
.pack {
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
}
.word_div {
    width: 100%;
    height: 80px;
    margin-top: 20px;
    text-align: center;
}
.explained_div {
    width: 95%;
    font-size: 24px;
    margin: 0 auto;
}
.understand_div {
    width: 95%;
    font-size: 18px;
    margin: 0 auto;
    padding-top: 30px;
}
.tab_div {
    width: 95%;
    margin: 0 auto;
}
.word_div span {
    font-size: 54px;
    font-weight: 600;
}
.button_div {
    bottom: 0;
    position: static;
    width: 100%;
}
.explained {
    font-weight: 600;
}
.point {
    cursor: pointer;
}
</style>